<template>
  <div class="usermiddle">
    <!-- 实时曲线 -->
    <div class="middlebox">
      <div class="titlebox">
        <div class="title">实时曲线</div>
        <div class="zhongjia">
          <!-- <div class="fang bule"></div>
          <div class="text">昨日</div>
          <div class="fang yellow"></div>
          <div class="text">实时</div>
          <div class="chang bule"></div>
          <div class="text">昨日</div>
          <div class="chang yellow"></div>
          <div class="text">实时</div> -->
        </div>
        <div></div>
      </div>
      <div style="height: 90%;overflow: hidden;" ref="shishiquxian"></div>
    </div>
    <div class="middlebox">
      <div class="fuhequshi">
          <div class="title">能耗趋势</div>
          <div>
            <el-radio-group v-model="radio4" size="mini" @change="getelequshi">
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!-- <div style="height: 90%;" ref="echartpiejiegou"></div> -->
         <div class="pieandbar">
          <div class="echartpiejiegou" ref="echartpiejiegou" style="overflow: hidden;"></div>
          <div class="echartbarjiegou" ref="echartbarjiegou" style="overflow: hidden;"></div>
         </div>
    </div>
  </div>
</template>

<script>
import { timeArray } from '@/utils/array'
import {getshihsiquxianpai,getgouchengpieapi,getgouchengquxianapi} from '@/api/energy-consumption/GeneralSituation/UserPage'
import * as echarts from 'echarts';
export default {
  name: 'CallPoliceUsermiddle',
  props: ['companyId'],
  data() {
    return {
      radio4:'月'
    };
  },

  mounted() {
  },

  methods: {
    getmiddlelist() {
      this.getshishiquxian()
      this.getjiegoupie()
      this.getelequshi()
    },
    // 获取实时曲线
    async getshishiquxian() {
      var chartDom = this.$refs.shishiquxian
      var myChart = echarts.init(chartDom);
      var option;
      const { data: { list } } = await getshihsiquxianpai({ companyId: this.companyId })
      // const timePoints = list[0]?.datalist.map(ele => ele.timeReading)
      const timePoints = timeArray
      const colorlist=['#1a90fe','#f2d649']

      const jinshishi =list.filter(ele=>ele.name=='实时用量')[0]
      const jinshishilist=jinshishi.datalist.map(ele => ele.valueReading)
      let jinshishinum = this.gettotaltime(jinshishi.datalist[0]?.timeReading)
      for (let i = 0; i < jinshishinum; i++){
        jinshishilist.unshift(' ')
      }

      const zuoshishi = list.filter(ele => ele.name == '昨日用量')[0]
      const zuorishilist = zuoshishi.datalist.map(ele => ele.valueReading)
      let conct= this.gettotaltime(zuoshishi.datalist[0]?.timeReading)
      for (let i = 0; i < conct; i++){
        zuorishilist.unshift(' ')
      }

      const jinfuhe = list.filter(ele => ele.name == '实时负荷')[0]
      const jinsrifuhelist = jinfuhe.datalist.map(ele => ele.valueReading)
      let jinfuhenum=this.gettotaltime(jinfuhe.datalist[0]?.timeReading)
      for (let i = 0; i < jinfuhenum; i++){
        jinsrifuhelist.unshift(null)
      }

      const zuofuhe = list.filter(ele => ele.name == '昨日负荷')[0]
      const zuorifuhelist = zuofuhe.datalist.map(ele => ele.valueReading)
      let zuofuhetol = this.gettotaltime(zuofuhe.datalist[0]?.timeReading)
      for (let i = 0; i < zuofuhetol; i++){
        zuorifuhelist.unshift(null)
      }
      option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,
          confine:true,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
        },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          top: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(kWh)',
            axisLine: {
            show: true,
            },
          },
          {
            type: 'value',
            name: '负荷(kW)',
            axisLine: {
            show: true,
            },
          },
        ],
        series: [
        {
              name: '实时用量',
              type: 'bar',
              data: jinshishilist
          },
          {
            name: '实时负荷',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'none',
              symbolSize: 0,
              yAxisIndex: 1,
              data: jinsrifuhelist
          },
          {
            name: '昨日用量',
              type: 'bar',
            data: zuorishilist
          },
          {
              name: '昨日负荷',
              type: 'line',
              smooth: true,
              showSymbol: false,
              symbol: 'none',
              symbolSize: 0,
              yAxisIndex: 1,
              data: zuorifuhelist
          },
        ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    gettotaltime(fixedTimeString) {
      var fixedTime = new Date(fixedTimeString);
      // 获取当天00:00:00的时间戳
      var todayTimestamp = new Date(fixedTime.getFullYear(), fixedTime.getMonth(), fixedTime.getDate()).getTime();

      // 计算固定时间距离当天00:00:00的毫秒数
      var fixedTimestamp = fixedTime.getTime() - todayTimestamp;

      // 计算固定时间之前的时间段数量
      var totalSegmentsBeforeFixed = Math.floor(fixedTimestamp / (15 * 60 * 1000))
      return totalSegmentsBeforeFixed
    },
    // 获取用电结构饼图
    async getjiegoupie() {
      var chartDom = this.$refs.echartpiejiegou
      var myChart = echarts.init(chartDom);
      var option;
      const {data:{entity}}=await getgouchengpieapi({companyId:this.companyId})
      option = {
      color: ['#1a90fe', '#66cbff', '#16ccc0','#f2d649'],
      grid: {
      containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,
          confine:true,
        },
      title: {
        top: 'middle',
        left: 'center',
        text: `{b|${entity.avgPrice?entity.avgPrice:'0'}} {c|元/kWh}\n{a|平均电价}{d|}`,
        textStyle: {
          rich: {
            a: {
              color: '#8994A3',
              fontSize: 16,
              // lineHeight: 80
            },
            b: {
              color: '#4E5766',
              fontSize: 18,
            },
            c: {
              color: '#8994A3',
              fontSize: 16,
            },
          }
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['55%', '80%'],
          label: {
            color: '#8994A3',
            fontSize: 14,
            show: true,
            // position: 'outside',
            // padding: [0,-30],
            formatter(param) {
              // correct the percentage
              return param.name + ':' + param.value;
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: '700',
              color: '#4E5766'
            }
          },
          // labelLine: {
          //   length: 10,//视觉引导线第一段的长度
          //   length2: 50,//视觉引导线第二段的长度
          // },
          data: [
            { value: entity.sharpValue, name: '尖' },
            { value: entity.peakValue, name: '峰' },
            { value: entity.flatValue, name: '平' },
            { value: entity.valleyValue, name: '谷' },
          ]
        }
      ]
    };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
     // 获取用电结构趋势
    async getelequshi() {
      var chartDom = this.$refs.echartbarjiegou
      var myChart = echarts.init(chartDom);
      var option;
      const { data: { list } } = await getgouchengquxianapi({
        companyId:this.companyId,dateType: this.radio4=='月'?'2':'3',
      })
      // 获取X轴数据
      const timePoints =[]
      for (let i = 0; i < list.length; i++) {
          if (list[i].datalist.length > 0) {
              list[i].datalist.forEach(data => {
                timePoints.push(data.timeReading);
              });
              break;
          }
      }
      const series = list.map(ele => {
        return {
            name:ele.name,
            data: ele.datalist.map(ele=>ele.valueReading),
            type: 'bar',
            stack: 'total',
            emphasis: {
              focus: 'series'
            },
            animationDelay: function (idx) {
              return idx * 50 + 1000;
            }
          }
      })
      option = {
        color: ['#1a90fe', '#66cbff', '#16ccc0','#f2d649'],
        tooltip: {
          transitionDuration: 0,
          confine:true,
          trigger: 'axis',
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          right: '0'
        },
        grid: {
          left: '4%',
          right: '1%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: timePoints
        },
        yAxis: {
          name:'电量(kWh)',
          type: 'value',
        },
        series: series,
        animationEasing: 'elasticOut',
        animationDuration: 2000,
        // barWidth: 60
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped>
.title{
  font-weight: bold;
        font-size: 16px;
        color: #323232;
}
.usermiddle{
  height: 100%;
  display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 10px;
    justify-content: space-between;
    .middlebox{
      background-color: #fff;
      padding: 20px 20px 10px 20px;
      .fuhequshi{
        display: flex;
        justify-content: space-between;
      }
      .pieandbar{
        display: flex;
        height: 88%;
         .echartpiejiegou{
          width: 40%;
         }
         .echartbarjiegou{
          width: 60%;
         }
      }
      .titlebox{
        display: flex;
        justify-content: space-between;
        .zhongjia{
          display: flex;
          align-items: center;
          .fang{
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 2px;
          }
          .text{
            font-size: 12px;
            margin-right: 10px;
          }
          .chang{
            width: 10px;
            height: 3px;
            margin-right: 10px;
          }
          .yellow{
            background-color: #1a90fe;
          }
          .bule{
            background-color: #f2d649;
          }
        }
      }
    }
}
</style>